Skip to main content

Install WUI SDK

Project Structure​

The typical UI application developed with Cumulia WUI includes the following in its development project:

  • index.html

    This file serves as the entry point or default homepage for the web application. It defines the initial structure of the application and usually references and loads other resources to create the complete user interface.

    <!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8" />
      <link rel="icon" type="image/svg+xml" href="/vite.svg" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>WUI Test</title>
    </head>

    <body>
      <script type="module" src="./src/main.ts"></script>
    </body>

    </html>

  • src/

    This directory stores the actual code that implements the software package's functionality. Its internal structure may vary based on the organization and complexity of your package. Typically, it includes the following:

    • main.ts: This file acts as the main entry point of the entire software package. It imports functions and classes from other files and may also export functions or classes for use by other applications.

    • Other TypeScript files: To enhance organization, the core logic of the package may can be distributed across multiple files. These files are then imported into main.ts or utilized in other packages.

  • public/

    This directory contains resources that must be served to the web page, including data, images, and other assets.

  • package.json

    This file specifies custom scripts which can be automatically executed using the command npm run <script_name>. It also lists the required dependencies and their versions, aiding developers in automatically build and test processes while ensuring compatibility.

SDK Libraries in Cumulia WUI​

We provide WUI basic and a series of plugins for your use:

  • wui.basic
  • wui.component
  • wui.context

SDK Installation​

for a modern web application, npm helps developers build programs efficiently and maintainably, simplifying dependency management processes.

Setting up Development Environment​

Node.js Installation

npm comes bundled with Node.js, which is a JavaScript runtime environment that enables you to execute JavaScript code outside of web browsers. To get started, download and install the latest stable version of Node.js from the offical website. The installation automatically includes npm.

Code Editor or IDE

Select a code editor or Integrated Development Environment(IDE) that fits your preferences. Popular options include Visual Studio Code, Atom, or WebStorm. These tools offer features such as syntax highlighting, code completion, and debugging capabilities.

Installing Package​

Once your environment is setup, you can begin building your application. The package.json file specifies the names of packages you need to integrate. Using the command npm install, npm retrieves these packages and their dependencies from the npm registry, automatically creates a node_modules/ directory and stores the dependent packages there.

Copying SDK Libraries​

Transfer the required Cumulia WUI SDK library files into the node_modules/ directory.

License Verification​

Running the Application​

To run your application, use the command npm run dev. This will generate a URL, typically like http://localhost:3001/, which you can open in your web browser to view your application.